<template>
  <TableView class="table">
    <template #form>
      <NSpace justify="space-between">
        <NSpace align="center">
          投票人:
          <NInput style="width: 200rem" placeholder="请输入投票人" v-model:value="paginationReactive.userName" clearable />
          所在部门:
          <NSelect style="width: 200rem" placeholder="请选择部门" v-model:value="paginationReactive.deptId" clearable
            :options="bbgDeptList" label-field="name" value-field="value" filterable />
          卷类:
          <NSelect style="width: 200rem" placeholder="请选择卷类" v-model:value="paginationReactive.paperType" clearable
            :options="[
              { label: 'A卷', value: '0' },
              { label: 'B卷', value: '1' },
              { label: 'C卷', value: '2' }
            ]" filterable />
          状态:
          <NSelect style="width: 200rem" placeholder="请选择状态" v-model:value="paginationReactive.status" clearable :options="[
            { label: '考核中', value: '0' },
            { label: '已完成', value: '1' },
            { label: '已过期', value: '2' }
          ]" filterable />
          <NButton type="primary" style="width: 78rem" ghost
            @click="() => ((paginationReactive.page = 1), getAssessInfoList())">
            查询
          </NButton>
        </NSpace>
      </NSpace>
    </template>

    <template #table="props">
      <NDataTable v-bind="props" :bordered="false" :columns="columns" :data="tableData" :pagination="false"
        :loading="tableLoading" />
    </template>

    <template #pagination>
      <NPagination :page-sizes="paginationReactive.pageSizes" :item-count="paginationReactive.itemCount"
        :page="paginationReactive.page" :page-size="paginationReactive.pageSize"
        @update:page="paginationReactive.onChange" @update:page-size="paginationReactive.onUpdatePageSize"
        show-size-picker show-quick-jumper :suffix="() => '页'">
        <template #prefix>
          <span style="font-size: 14px;"> 共{{ paginationReactive.itemCount }}条</span>
        </template>
      </NPagination>
    </template>
  </TableView>

  <NModal :auto-focus="false" v-model:show="modalVisible" @close="modalVisible = false">
    <VDialogContent @close="modalVisible = false" @submit="assessTitle ? openAssess() : closeAssess()"
      :title="assessTitle ? '开启提示' : '关闭提示'">
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        {{ assessTitle ? '您确定开启该条考核吗？' : '您确定关闭该条考核吗？' }}
      </div>
    </VDialogContent>
  </NModal>
</template>
<script setup lang="ts">
import { NSpace, NButton, NDataTable, NPagination, useMessage, NModal, NInput, NSelect } from 'naive-ui'
import { h, reactive, ref, watch, onDeactivated, onMounted } from 'vue'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import type { DataTableColumns } from 'naive-ui'
import TableView from '@/components/TableView.vue'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import { useViewerStore } from '@/views/OA/Common/store'

const useStore = useViewerStore()
const message = useMessage()
const route = useRoute()
const modalVisible = ref(false)

const columns: DataTableColumns = [
  {
    title: '投票人',
    key: 'userName',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '所在部门',
    key: 'deptName',
    width: 60,
    align: useStore.isCenter
  },
  {
    title: '卷类',
    key: 'paperType',
    width: 60,
    align: useStore.isCenter,
    render: (row: any) => {
      if (row.paperType == '0') return 'A卷'
      else if (row.paperType == '1') return 'B卷'
      else if (row.paperType == '2') return 'C卷'
      else if (row.paperType == '3') return '被考核人员'
      else return '--'
    }
  },
  {
    title: '下发日期',
    key: 'sendTime',
    width: 100,
    align: useStore.isCenter
  },
  {
    title: '提交时间',
    key: 'submitTime',
    width: 100,
    align: useStore.isCenter
  },
  {
    title: '状态',
    key: 'status',
    width: 60,
    align: useStore.isCenter,
    render: (row: any) => {
      if (row.status == '0') return '考核中'
      else if (row.status == '1') return '已完成'
      else if (row.status == '2') return '已过期'
      else return '--'
    }
  },
  {
    title: '操作',
    key: 'action',
    align: useStore.isCenter,
    width: 120,
    fixed: 'right',
    render: (row: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          style: { display: row.status == '2' ? 'inlne-block' : 'none' },
          onClick: async () => {
            assessId.value = row.id
            assessTitle.value = true
            modalVisible.value = true
          }
        },
        {
          default: () => '开启'
        }
      ),
      h(
        NButton,
        {
          type: 'primary',
          color: useStore.color.delete,
          quaternary: true,
          style: { display: row.status == '0' ? 'inlne-block' : 'none' },
          onClick: async () => {
            assessId.value = row.id
            assessTitle.value = false
            modalVisible.value = true
          }
        },
        {
          default: () => '关闭'
        }
      )
    ]
  }
]
// 上一页下一页
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  userName: null, //投票人
  deptId: null, //部门id
  paperType: null, //卷类
  status: null, //状态
  onChange: (page: number) => {
    paginationReactive.page = page
    getAssessInfoList()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    getAssessInfoList()
  }
})
//部门
const bbgDeptList: any = ref([])
const getBbgDeptList = async () => {
  const [error, res] = await sendRequest({
    module: 'overTime',
    api: 'BbgDeptList'
  })
  if (error || res.code != 0) return
  bbgDeptList.value = res.data
}
// 开启
const assessTitle: any = ref(null)
const assessId = ref()
const openAssess = async () => {
  modalVisible.value = false
  tableLoading.value = true
  const [error, res] = await sendRequest({
    module: 'assess',
    api: 'assessButton',
    override: {
      params: {
        id: assessId.value
      }
    }
  })
  if (error) return message.error('开启失败'), (tableLoading.value = false)
  if (res.code !== 0) return message.error('开启失败'), (tableLoading.value = false)
  getAssessInfoList()
  message.success('开启成功')
}
// 关闭
const closeAssess = async () => {
  modalVisible.value = false
  tableLoading.value = true
  const [error, res] = await sendRequest({
    module: 'assess',
    api: 'assessButton',
    override: {
      params: {
        id: assessId.value
      }
    }
  })
  if (error) return message.error('关闭失败'), (tableLoading.value = false)
  if (res.code !== 0) return message.error('关闭失败'), (tableLoading.value = false)
  getAssessInfoList()
  message.success('关闭成功')
}
// 获取列表
const tableData = ref([])
const tableLoading = ref(false)
const getAssessInfoList = async () => {
  tableLoading.value = true
  const [error, res] = await sendRequest({
    module: 'assess',
    api: 'assessListInfo',
    override: {
      params: {
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
        userName: paginationReactive.userName,
        deptId: paginationReactive.deptId,
        paperType: paginationReactive.paperType,
        status: paginationReactive.status,
        appraiseId: appraiseId.value
      }
    }
  })
  tableLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  tableData.value = []
  setTimeout(() => {
    tableData.value = res.data.list
    paginationReactive.itemCount = res.data.totalCount
  }, 0)
}

const keyUpDown = (e: any) => e.key == 'Enter' && getAssessInfoList()
onDeactivated(() => window.removeEventListener('keyup', keyUpDown, false))

const appraiseId = ref()
watch(
  () => route,
  async () => {
    if (route.path == '/OA/Assess/AssessInfoList' && route.query.appraiseId) {
      appraiseId.value = route.query.appraiseId
      getAssessInfoList()
      window.addEventListener('keyup', keyUpDown, false)  // 回车
    }
  },
  { deep: true, immediate: true }
)

onMounted(() => {
  getBbgDeptList()
})
</script>
<style scoped lang="scss">
.table {
  padding: 29rem 30rem 42rem;
}
</style>
  